import PropTypes from 'prop-types';
import React from 'react';

// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Grid, Tab, Tabs, Typography } from '@mui/material';

// project imports
import useConfig from 'hooks/useConfig';

// tab content
function TabPanel({ children, value, index, ...other }) {
  return (
    <div role="tabpanel" hidden={value !== index} id={`vertical-tabpanel-${index}`} aria-labelledby={`vertical-tab-${index}`} {...other}>
      {value === index && (
        <Box
          sx={{
            p: 0
          }}
        >
          {children}
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    'aria-controls': `vertical-tabpanel-${index}`
  };
}

export default function MyVerticalTabs({ tabsData }) {
  const theme = useTheme();
  const { borderRadius } = useConfig();

  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <div>
      <Grid container>
        <Grid item>
          <Tabs
            value={value}
            onChange={handleChange}
            orientation="vertical"
            variant="scrollable"
            sx={{
              '& .MuiTabs-flexContainer': {
                borderBottom: 'none'
              },
              '& button': {
                borderRadius: `${borderRadius}px`,
                color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900',
                minHeight: 'auto',
                minWidth: '100%',
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'flex-start',
                textAlign: 'left',
                justifyContent: 'flex-start'
              },
              '& button.Mui-selected': {
                color: theme.palette.primary.main,
                background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50]
              }
            }}
          >
            {tabsData.map((tab, index) => (
              <Tab
                key={index}
                icon={tab.icon}
                label={
                  <Grid container direction="column">
                    <Typography variant="subtitle1" color="inherit">
                      {tab.label}
                    </Typography>
                    <Typography component="div" variant="caption" sx={{ textTransform: 'capitalize' }}>
                      {tab.description}
                    </Typography>
                  </Grid>
                }
                {...a11yProps(index)}
              />
            ))}
          </Tabs>
        </Grid>
        <Grid item>
          {tabsData.map((tab, index) => (
            <TabPanel key={index} value={value} index={index}>
              {tab.content}
            </TabPanel>
          ))}
        </Grid>
      </Grid>
    </div>
  );
}
